<template>
  <f7-page subnavbar :class="{'bg-color-white': logs.length === 0}">
    <f7-navbar :title="$t('m.mo1')" back-link=" ">
      <f7-subnavbar class="subnav-tabs">
        <van-tabs v-model="active" color="#1898ff" @change="init(active+1)">
          <van-tab :title="$t('m.mo2')"></van-tab>
          <van-tab :title="$t('m.mo3')"></van-tab>
        </van-tabs>
      </f7-subnavbar>
    </f7-navbar>

    <no-content-tips v-if="logs.length === 0"></no-content-tips>

    <div class="transaction-list" v-else>
      <ul>
        <li v-for="(item, index) in logs" :key="index">
          <div class="title">
            <h4>{{item.ctc_id === '1'?$t('m.mo4'):$t('m.mo5')}}USDT</h4>
            <span>{{item.status | statusFilter}}</span>
            <span>{{$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </div>

          <div class="main-content">
            <div class="left">
              <div>
                <span>{{$t('m.mo5')}}</span>
                <span>{{item.num}}</span>
              </div>
              <div>
                <span>{{$t('m.mo7')}}</span>
                <div class="pay-types-imgs-box">
                  <img :src="img | imgFilter" alt="" v-for="(img, idx) in item.passPayTypes" :key="idx">
                </div>
              </div>
            </div>
            <div class="right">
              <div>
                <span>{{$t('m.mo8')}}</span>
                <span>{{item.price}}</span>
              </div>
              <div>
                <span>{{$t('m.mo9')}}</span>
                <span>{{item.num * item.price}}</span>
              </div>
            </div>
          </div>

          <div class="main-content">
            <div class="left">
              <div>
                <span>{{$t('m.mo10')}}</span>
                <span>{{item.trade_num}}</span>
              </div>
              <div>
                <span>{{$t('m.mo11')}}</span>
                <span>{{item.num - item.trade_num}}</span>
              </div>
            </div>
            <div class="right">
              <div>
                <span>{{$t('m.mo12')}}</span>
                <span>{{item.trade_num * item.price}}</span>
              </div>
              <div>
                <span>{{$t('m.mo13')}}</span>
                <span>{{(item.num - item.trade_num) * item.price}}</span>
              </div>
            </div>
          </div>

         <div class="footer-button" v-if="active === 0">
           <f7-button fill color="orange" @click="cancelOrder(item)">{{$t('m.mo14')}}</f7-button>
         </div>
        </li>
      </ul>
    </div>
  </f7-page>
</template>

<script>
  import {getMyCTCList, delOrder} from "../api/find";
  export default {
    name: "my-orders",
    data () {
      return {
        active: 0,
        logs: []
      }
    },
    filters: {
      statusFilter(status) {
        switch (status) {
          case '-1': return this.$t('m.mo15');
          case '0': return this.$t('m.mo16');
          case '1': return this.$t('m.mo17');
          case '2': return this.$t('m.mo18');
          case '3': return this.$t('m.mo19');
        }
      },
      imgFilter(imgType) {
        switch (imgType) {
          case '1': return require('../static/bank_card.png');
          case '2': return require('../static/alipay.png');
          case '3': return require('../static/wechat.png');
        }
      }
    },
    mounted() {
      this.init(this.active+1);
    },
    methods: {
      init(status) {
        getMyCTCList({status}).then(res => {
          this.logs = res.data.map(item => {
            this.$set(item, 'passPayTypes', item.pay_type.split(','));
            return item;
          });
        })
      },
      cancelOrder(item) {
        delOrder({ctc_id: item.ctc_id, order_id: item.id}).then(() => {
          this.init();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .transaction-list {
    margin-top: $padding20;
    ul {
      li {
        background: #fff;
        padding: $padding20;
        margin-bottom: $padding20;

        .title {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid $borderColor;
          padding-bottom: $padding20;
          h4 {
            font-weight: bold;
          }
          span {
            color: $mainColor;
          }
        }
        .main-content {
          display: flex;
          justify-content: space-between;
          color: $colorGrey;
          padding: 10px 0;
          &:nth-of-type(2) {
            border-bottom: 1px solid $mainColor2;
          }
          > div {
            flex: 1;
            &:first-child {
              margin-right: 50px;
            }
            > div {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 10px 0;
            }
          }
        }
        .footer-button {
          text-align: right;
        }
        .button {
          display: inline-block;
        }
      }
    }
  }
</style>
